<template>
  <div class="ele-body">
    <div style="display: flex; justify-content: space-between">
      <three-school :activeList="activeList" load-school @click="schoolChange"></three-school>
      <el-card shadow="never" style="width: 100%">
        <div style="display: flex; justify-content: space-between; align-items: center">
          <b style="margin-left: 16px">当前学校：{{ query.schoole_name || "暂无学校" }}</b>
          <div class="ele-form-actions">
            <el-button size="small" type="danger" icon="el-icon-delete" class="ele-btn-icon" @click="removeBatch">删除</el-button>
            <el-button size="small" type="primary" icon="el-icon-plus" class="ele-btn-icon" @click="openEdit(null)">添加</el-button>
          </div>
        </div>
        <el-row>
          <el-tabs v-model="query.mode" type="card" @tab-click="handleClick">
            <el-tab-pane label="学校区域" name="safe"></el-tab-pane>
            <el-tab-pane label="危险区域" name="pitfall"></el-tab-pane>
          </el-tabs>
        </el-row>
        <div style="padding: 20px;border:1px solid #e5e5e5;border-top:0">
          <el-table border lazy ref="table" :data="data" v-loading="loading" height="calc(100vh - 385px)"
                    @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column label="序号" width="55" align="center" type="index">
              <template slot-scope="scope">
                  <span v-text="$setTableIndex(query.page, query.limit, scope.$index)"></span>
              </template>
            </el-table-column>
            <el-table-column label="区域名称" align="center" prop="title"/>
            <el-table-column label="学校" align="center" prop="schoole_name">
            </el-table-column>
            <el-table-column label="省" align="center" prop="province_name"/>
            <el-table-column label="市" align="center" prop="city_name"/>
            <el-table-column label="县/区" align="center" prop="district_name"/>
            <el-table-column label="街道" align="center" prop="streets_name"/>

            <el-table-column label="具体地址" align="center" prop="address" width="200"/>
            <el-table-column label="排序" align="center" prop="sort" width="50"/>
            <el-table-column label="创建时间" align="center" prop="create_time" width="200">
              <template slot-scope="scope">{{
                  scope.row.create_time
                      ? $util.toDateString(scope.row.create_time)
                      : "暂无"
                }}
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" fixed="right" width="200" :resizable="true">
              <template slot-scope="{ row }">
                <el-link type="text" :underline="false" icon="el-icon-edit" @click="openEdit(row)">修改
                </el-link>
                <el-popconfirm class="ele-action" :title="'确定要删除该' + (query.mode === 'safe' ? '学校区域': '危险区域') + '吗？'" @confirm="remove(row)">
                  <el-link type="text" slot="reference" :underline="false" icon="el-icon-delete">删除
                  </el-link>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <pagination :total="total" :page.sync="query.page" :limit.sync="query.limit" @pagination="getData"/>
        </div>
        <!-- 数据表格 -->
      </el-card>
    </div>
    <!-- 编辑弹窗 -->
    <region-edit :data="current" :schooleName="query.schoole_name " :dzName="name_arr_dz" :mode="query.mode"
                 :visible.sync="showEdit"
                 @done="reload"/>
  </div>
</template>

<script>
import {
  mapGetters
} from "vuex";
import regions from "ele-admin/packages/regions";
import threeSchool from "@/components/three_schoole.vue";
import regionEdit from "./region-edit.vue";

export default {
  name: "SystemUser",
  components: {
    threeSchool,
    regionEdit
  },
  computed: {
    ...mapGetters(["permission"]),
  },
  data() {
    return {
      // 省市区数据
      regions: regions,
      row_span: 20,
      // 选中的省市区
      city: [],
      loading: false, // 表格加载状态
      selection: [], // 表格选中数据
      total: 0, // 数据总数
      data: [], // 表格数据接口
      // 表格搜索条件
      query: {
        page: 1,
        limit: 20,
        schoole_id: "",
        schoole_name: "",
        mode: "safe", //safe(安全)、pitfall(危险)
      },
      activeList: [],
      showEdit: false,
      current: null,
      schoolListData: [],
      name_arr_dz: []
    };
  },
  watch: {
    '$route': 'getPath',
    'showEdit': 'reload'
  },
  mounted() {
    this.$http
        .get("/schoole/index", {
          params: {
            page: 1,
            limit: 1,
            title: this.$route.query.schoole_name
          },
        })
        .then((res) => {
          if (res.data.count == 0) return;
          this.query = {
            page: 1,
            limit: 20,
            mode: "safe", //safe(安全)、pitfall(危险)
            schoole_id: res.data.data[0].id,
            schoole_name: res.data.data[0].title,
          };
          this.activeList = [
            res.data.data[0].province_code,
            res.data.data[0].city_code,
            res.data.data[0].district_code,
            res.data.data[0].streets_code,
          ];
          this.name_arr_dz = [
            res.data.data[0].province_name,
            res.data.data[0].city_name,
            res.data.data[0].district_name,
            res.data.data[0].streets_name,
          ];
          window.name_arr_dz = this.name_arr_dz
          window.schoole_name = res.data.data[0].title,
              window.location_name_school = res.data.data[0].location
          this.getData();
        })
        .catch((e) => {
          this.loading = false;
          this.$message.error(e.message);
        });
  },
  methods: {
    getPath() {
      if (this.$route.query.id) {
        let obj = this.$route.query
        console.log(obj)
        this.query = {
          page: 1,
          limit: 20,
          mode: obj.mode, //safe(安全)、pitfall(危险)
          schoole_id: obj.id,
          schoole_name: obj.schoole_name,
        };
        this.activeList = obj.activeList;
        this.getData()
      }
    },
    handleClick() {
      this.query.page = 1;
      this.showEdit = false
      this.getData();
    },
    /* 显示编辑 */
    openEdit(row) {
      if (!row) {
        row = {
          schoole_id: this.query.schoole_id,
        }
        this.$forceUpdate();
      }
      this.current = row;
      this.showEdit = true;
    },
    schoolChange(event) {
      this.showEdit = false
      this.query = {
        page: 1,
        limit: 20,
        mode: "safe", //safe(安全)、pitfall(危险)
        schoole_id: event.value,
        schoole_name: event.label,
      };
      this.name_arr_dz = event.labels
      window.name_arr_dz = event.labels
      window.schoole_name = event.label
      window.location_name_school = event.location
      this.getData();
    },
    /* 获取表格数据 */
    getData() {
      this.loading = true;
      this.$http
          .get("/schoole_region/index", {
            params: this.query
          })
          .then((res) => {
            this.loading = false;
            this.total = res.data.count;
            this.data = res.data.data;
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
    },
    /* 查询数据 */
    reload() {
      this.getData();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selection = selection;
    },
    /* 删除 */
    remove(row) {
      const loading = this.$loading({
        lock: true
      });
      this.$http
          .post(`/schoole_region/delete`, {
            id: row.id,
            mode: this.query.mode
          })
          .then((res) => {
            loading.close();
            if (res.data.code === 0) {
              this.$message.success(res.data.msg);
              this.reload();
            } else {
              this.$message.error(res.data.msg);
            }
          })
          .catch((e) => {
            loading.close();
            this.$message.error(e.message);
          });
    },
    /* 批量删除 */
    removeBatch() {
      if (!this.selection.length) {
        this.$message.error("请至少选择一条数据");
        return;
      }
      this.$confirm('确定要删除选中的' + (this.query.mode === 'safe' ? '学校区域': '危险区域') + '吗?', "提示", {
        type: "warning",
      })
          .then(() => {
            const loading = this.$loading({
              lock: true
            });
            this.$http
                .post("/schoole_region/delete", {
                  id: this.selection.map((d) => d.id),
                  mode: this.query.mode
                })
                .then((res) => {
                  loading.close();
                  if (res.data.code === 0) {
                    this.$message({
                      type: "success",
                      message: res.data.msg
                    });
                    this.reload();
                  } else {
                    this.$message.error(res.data.msg);
                  }
                })
                .catch((e) => {
                  loading.close();
                  this.$message.error(e.message);
                });
          })
          .catch(() => {
          });
    },
  },
};
</script>

<style scoped>
.toolbar-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.right_show {
  position: absolute;
  left: -15px;
  top: 2px;
  display: inline-block;
  text-align: center;
  line-height: 30px;
  background-color: #1890ff;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  width: 30px;
  color: #fff;
  cursor: pointer;
}
</style>
